<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body>

<div style="padding: 10px">
    <form class="layui-form layui-form-pane">
        <input type="text" name="roleId" hidden>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" lay-verify="required" name="role">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" lay-verify="required" name="roleName">
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>权限</legend>
        </fieldset>
        <div class="layui-form-item" name="perms"></div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitRole">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["form", "jquery", "layer"], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;


        //获取父页面传递的参数
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r !== null)
                return unescape(r[2]);
            return null;
        };

        $(document).ready(function () {
            let roleId = getQueryString("roleId");
            $("input[name=roleId]").val(roleId);
            let loadIndex = null;
            $.ajax({
                url: "/getRoleById",
                dataType: "json",
                type: "get",
                data: "roleId=" + roleId,
                beforeSend: function () {
                    loadIndex = layer.load();
                },
                success: function (responseData) {
                    layer.close(loadIndex);
                    let permissions;
                    let permissionIds;
                    for (var key in responseData) {
                        if(key=="role"){
                            $("input[name=role]").val(responseData[key].role);
                            $("input[name=roleName]").val(responseData[key].roleName);
                        }else if(key== "permissions"){
                            permissions=responseData[key];
                        }else if(key == "permissionIds"){
                            permissionIds=responseData[key];
                        }
                    }
                    $("div[name=perms]").html("");
                    for(let i=0; i<permissions.length; i++){
                        let flag=false;
                        for(let j=0; j<permissionIds.length; j++){
                            console.log(permissionIds[j]+"\t"+permissions[i].permissionId);
                            if(permissionIds[j]==permissions[i].permissionId)
                                flag=true;
                        }
                        console.log(flag);
                        if(flag==true){
                            $("div[name=perms]").append("<input type='checkbox' name='" + permissions[i].permission + "' value='" + permissions[i].permissionId + "' title='" + permissions[i].permissionName + "' checked=''>");
                        }else{
                            $("div[name=perms]").append("<input type='checkbox' name='" + permissions[i].permission + "' value='" + permissions[i].permissionId + "' title='" + permissions[i].permissionName + "' >");
                        }
                    }
                    form.render();
                },
                error: function () {
                    layer.close(loadIndex);
                    layer.msg("服务器错误，请重试！", {icon: 2, time: 1000});
                },
            });
        });

        form.on("submit(submitRole)", function (data) {
            console.log(data.field);
            $.ajax({
                url: "/executeEditRole",
                data: data.field,
                dataType: "json",
                type: "post",
                success: function (responseResult) {
                    if (responseResult.code == 1) {
                        layer.msg(responseResult.msg, {icon: 1, time: 1000});
                    } else {
                        layer.msg(responseResult.msg, {icon: 7, time: 1000});
                    }
                },
                error: function () {
                    layer.msg("服务器错误，请重试！", {icon: 2, time: 1000});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>